<template>
  <div class="audition92">
    <h3>px</h3>
    <p>页面默认的长度单位，绝对长度，是相对于屏幕分辨率而言的</p>
    <h3>em</h3>
    <p>相对长度，是当前元素的字体尺寸。比如浏览器默认字体大小是16px，那么1em = 16px</p>
    <h3>rem</h3>
    <p>相对长度。相对于html根元素字体大小的单位，当html的font-size：16px时，1rem = 16px</p>
    <p>------------------------------</p>
    <h3>为什么给font-size设置为62.5%?</h3>
    <p>是为了方便换算</p>
    <p>因为绝大多数浏览器的默认字体是16px，而html的font-size设置为62.5%，</p>
    <p>就相当于html的font-size是10px，也就是说此时1rem = 10px</p>
    <p>如果此时一个元素的width是100px，那么就可以写作width: 10rem;</p>
    <p>设置62.5%也不是绝对的</p>
    <p>比如Chrome浏览器的字体最小尺寸是12px，这时再设置为62.5%就不可行了</p>
    <p>反而设置为625%就更合适，此时html的font-size是100px，也就是1rem = 100px</p>
    <p>如果一个元素的width是100px,那么就可以写作width: 1rem</p>
  </div>
</template>

<script>
export default {
  name: 'Audition92',
}
</script>

<style>

</style>